<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Acceleration</title>
        <script type="text/javascript" src="../js/big5.js">
        </script>
        <script type="text/javascript">
            
            var ball = null
            var scale = 180
            
            function move(x, y, z){
            
                // Fit to screen
                var dx = -x * scale
                var dy = y * scale
                
                // Center
                var posX = (480 / 2 + dy - 4)
                var posY = (320 / 2 + dx - 4)
                
                // Set position
                ball.style.top = posX + "px"
                ball.style.left = posY + "px"
            }
            
            function start(){
                Device.Acceleration.start(move)
            }
            
            function stop(){
                Device.Acceleration.stop()
            }
            
            window.onload = function(){
                ball = $('ball')
                start()
            }
        </script>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                font-size: 125%;
            }
        </style>
    </head>
    <body>
        <div id="middle" style="position: absolute; top: 236px; left: 156px; width: 9px; height: 9px; background: silver;">
        </div>
        <div id="ball" style="position: absolute; top: 236px; left: 156px; width: 9px; height: 9px; background: red;">
        </div>
        <div align="center">
            <br/>
            <a href="#" onclick="start(); return false;">Start</a>
            &nbsp; <a href="#" onclick="stop(); return false;">Stop</a>
            &nbsp; <a href="index.html">Back to front page</a>
        </div>
    </body>
</html>
